<template>
  <view class="absolute top-0 left-0 bottom-0 right-0 pointer-events-none">
    <!-- 根据传入的背景类型显示不同的背景 -->
    <template v-if="bgType === 'image'">
      <view class="w-full h-full" :style="{ backgroundColor: bgColor }">
        <image
          class="w-full"
          :src="bgImage || freeConfig.bgImage"
          mode="widthFix"
        />
      </view>
    </template>
    <template v-else-if="bgType === 'color'">
      <view class="w-full h-full" :style="{ backgroundColor: bgColor }"></view>
    </template>
  </view>
  <view class="relative z-1">
    <z-paging
      ref="pagingRef"
      v-model="dataList"
      @query="onDataListQuery"
      v-bind="pagingProps"
    >
      <template #top>
        <free-navbar v-if="showNavbar" :navbar="navbar"></free-navbar>
        <slot name="top"></slot>
      </template>
      <template #refresher>
        <slot name="refresher">
          <view class="center">
            <wd-loading :size="40" color="#A9C1C0" />
          </view>
        </slot>
      </template>
      <template #loading>
        <slot name="loading">
          <view class="center pt-160rpx">
            <wd-loading :size="40" color="#A9C1C0" />
          </view>
        </slot>
      </template>
      <template #empty="{ isLoadFailed }">
        <slot name="empty">
          <view class="pt-160rpx">
            <free-empty
              :text="isLoadFailed ? '数据加载失败' : '暂无相关数据'"
            />
          </view>
        </slot>
      </template>
      <template #bottom>
        <slot name="bottom"></slot>
      </template>
      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
      <!-- 内容 -->
      <view class="relative">
        <slot></slot>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { getDefaultProps } from "../defaultProps";
import { ref, computed } from "vue";
import { freeConfig } from "../config";

const props = defineProps({
  ...getDefaultProps(),
  modelValue: {
    type: Array,
    default: () => [],
  },
  paging: {
    type: Object,
    default: () => ({}),
  },
  navbar: {
    type: Object,
    default() {
      return {};
    },
  },
  showNavbar: {
    type: Boolean,
    default: true,
  },
  bgType: {
    type: String,
    default: "", // 可选值: 'image', 'color', 空值表示使用默认
    validator: (value) => ["", "image", "color"].includes(value),
  },
  bgImage: {
    type: String,
    default: "",
  },
  bgColor: {
    type: String,
    default: "#ffffff",
  },
});
const emit = defineEmits(["update:model-value", "query"]);

const pagingProps = computed(() => {
  const defaultProps = {
    defaultPageSize: 20,
    autoShowBackToTop: true,
    emptyViewCenter: false,
  };
  return {
    ...defaultProps,
    ...props.paging,
  };
});

// z-paging组件元素
const pagingRef = ref();
const onDataListQuery = (pageNo) => {
  emit("query", pageNo);
};
const dataList = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:model-value", val);
  },
});

defineExpose({
  _pagingRef: pagingRef,
});
</script>

<style lang="scss" scoped></style>
